<!--
     This file generates the screen captured in visualizerLayout.png and used in visualizerLayout.md.
-->
<html>
   <head>
      <meta charset="utf-8" />

      <link rel="stylesheet" href="../style/fonts.css" type="text/css"></link>
      <style>
       /* colors from https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors */
       body {
          height: 95%;
          width: 96%;
          border: 6px solid #e6beff;  /* lavender */
          font-size: 40px;
          display: grid;
          grid-template-columns: 1fr 0.8em 0.2fr;
          grid-template-rows: auto 1fr;
          grid-template-areas: "header header header" "graphic splitter controls";
       }
       #header {
          grid-area: header;
          background-color: #D0D0D0;
          border: 6px solid #000075;  /* navy */
       }
       #graphic {
          grid-area: graphic;
          background-color: #E8C8C8;
          border: 6px solid #800000;  /* maroon */
       }
       #splitter {
          grid-area: splitter;
          background-color: #ECECEC;
          border: 6px solid #bfef45;  /* lime */
       }
       #controls {
          grid-area: controls;
          background-color: #F0E68C;
          border: 6px solid #f58231;  /* orange */
       }
       .center {
          text-align: center;
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
       }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <div id="header"><div style="text-align: center; margin: 10px">Header</div></div>
      <div id="graphic"><div class="center">Graphic</div></div>
      <div id="splitter"><div class="center" style="font-size: 35px">S p l i t t e r</div></div>
      <div id="controls"><div class="center">Controls</div>
   </body>
</html>
